<template>
  <div>
    <myDivider name="机构管理"></myDivider>
    <div class="Top">
      <el-input style="width: 160px;margin-left: 10px;" v-model="key1" placeholder="根据机构名称搜索"
        @keyup.enter.native="SouSuo" clearable></el-input>
      <el-input style="width: 160px" v-model="key2" placeholder="根据负责人姓名搜索" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-input style="width: 160px" v-model="key3" placeholder="根据手机号码搜索" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-cascader clearable change-on-select ref="areas" v-model="key4" :props="keyProps" style="width: 300px"
        @change="cascaderChange"></el-cascader>
      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo">查询</el-button>
      <el-button style="margin-top: 20px; margin-left: 15px" @click="reset">重置</el-button>
      <div class="operation" v-if="permissionBtnShow">
        <el-button type="primary" @click="openForm" v-permission="'新增'">新增</el-button>
        <el-button icon="el-icon-files" @click="ToBatchImport" v-permission="'批量导入'">批量导入</el-button>
      </div>
    </div>

    <div>
      <el-table :data="userData" style="width: 100%;margin-top: 100px" class="menuTable" row-key="uid"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">


        <el-table-column prop="shortName" label="机构名称" align="center">
        </el-table-column>

        <el-table-column prop="responsiblePersonName" width="100px" label="负责人" align="center">
        </el-table-column>

        <el-table-column prop="telephoneNumber" label="手机号码" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.telephoneNumber == null || scope.row.telephoneNumber == '' ? '—' :
              scope.row.telephoneNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="地区" align="center" width="300px">
          <template slot-scope="scope">
            <span>{{ scope.row.areaName == null || scope.row.areaName == '' ? '—' :
              scope.row.areaName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="" width="140px" label="级别" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.level == 1 ? '一级机构' : scope.row.level == 2 ? '二级机构' : scope.row.level == 3 ? '三级机构' : ''
              }}</span>

          </template>
        </el-table-column>

        <el-table-column prop="fatherCompanyName" label="上级机构" align="center" width="200px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.fatherCompanyName" placement="top-start">
              <span>{{ scope.row.fatherCompanyName == null || scope.row.fatherCompanyName == '' ? '—' :
                scope.row.fatherCompanyName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>



        <el-table-column prop="createTime" label="创建时间" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime ? scope.row.createTime.slice(0, 10) : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="160px" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini" @click="openDetailPage(scope.row)">详情</el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini"
              @click="echoValueForUpdate(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click="deleteAgencyById(scope.row)"></el-button> -->
            <div class="textBtn" v-if="permissionBtnShow">
              <el-row>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="openDetailPage(scope.row)">详情</span>
                </el-col>
                <el-col v-permission="'编辑'" class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="echoValueForUpdate(scope.row)">编辑</span>
                </el-col>
                <el-col v-permission="'删除'" class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="deleteAgencyById(scope.row)">删除</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 分页器 -->
    <myPagination :total="totalSize" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>




  </div>
</template>




<script>

import {
  getAgencyList,
  deleteinstInformation,
  getcityList
} from "./institution";


export default {
  data() {
    return {
      permissionBtnShow: false,
      key1: '',
      key2: '',
      key3: '',
      key4: [],
      keyProps: {
        lazy: true,
        lazyLoad(node, resolve) {
          let { level } = node
          if (node.level == 0) {
            getcityList('000000').then(res => {
              res.forEach(el => {
                el.value = el.criCode
                el.label = el.criName
                el.leaf = level >= 3
              })
              resolve(res)
            })
          } else {
            if (level == 3) {
              resolve([])
            } else {
              getcityList(node.value).then(res => {
                res.forEach(el => {
                  el.value = el.criCode
                  el.label = el.criName
                  el.leaf = level >= 2
                })
                resolve(res)
              })
            }
          }

        }
      },

      userData: [], //用户数据

      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      criLevel: 0,
    };
  },
  activated: function () {
    this.permissionBtnShow = false
    setTimeout(() => {
      this.permissionBtnShow = true
    }, 50)
    let userData = JSON.parse(sessionStorage.getItem('logOnUser'))

    //刚进入页面清空筛选项 然后加载
    // this.reset();
    this.key1 = ''
    this.key2 = ''
    this.key3 = ''
    this.key4 = []
    this.criLevel = 0
    this.getAgencyList()

  },
  mounted() {
  },
  methods: {
    ToBatchImport() {
      this.$router.push('/batchImport?name=机构信息导入')
    },
    cascaderChange(val) {
      if (val.length == 0) {
        this.criLevel = 0
        this.SouSuo()
        return
      }
      this.$nextTick(() => {
        const checkedNodes = this.$refs['areas'].getCheckedNodes()
        const pathLabels = checkedNodes[0].level
        this.criLevel = pathLabels
        this.SouSuo()


        const dom = document.getElementsByClassName("el-radio is-checked");
        //这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
      });
    },
    pageSizeChange(e) {
      this.pageSize = e
      this.getAgencyList()
    },
    PageChange(e) {
      this.pageNum = 1
      this.pageNum = e
      this.getAgencyList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getAgencyList()
    },
    reset() {
      this.key1 = ''
      this.key2 = ''
      this.key3 = ''
      this.key4 = []
      this.criLevel = 0
      this.pageNum = 1
      this.getAgencyList()
    },
    //按条件查询菜单列表
    getAgencyList() {
      if (this.key4.length == 0) {
        this.key4 = ['']
      }
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      getAgencyList(
        // this.key1,
        // "",
        // this.pageNum,
        // this.pageSize,
        // userData.unitType,
        // userData.unitId
        {
          shortName: this.key1,
          pid: '',
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          unitType: userData.unitType,
          unitId: userData.unitId,
          "responsiblePersonName": this.key2,
          "telephoneNumber": this.key3,
          "criCode": this.key4[this.key4.length - 1],
          "criLevel": this.criLevel
        }
      ).then((res) => {

        this.userData = res.list;
        // 遍历数据 如果数据为空就换为-
        this.userData.forEach(el => {
          for (let item in el) {
            if (el[item] == '' || el[item] == null) {
              el[item] = '-'
            }
          }
        });
        console.log(this.userData, '机构列表数据')
        this.totalSize = res.total;
      });
    },


    //弹出弹框并加载父级菜单
    openForm() {
      this.$router.push({ path: '/institution/institutionInsert' });
    },

    deleteAgencyById(row) {
      this.$confirm("确认删除该信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var id = row.id;
        deleteinstInformation(id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.$nextTick(() => {
              this.getAgencyList();
            })
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });
    },





    echoValueForUpdate(row) {
      var id = row.id;
      this.$router.push({ path: '/institution/institutionInsert', query: { id: id, operateType: 'update' } })
    },


    //打开账号绑定窗口 并回显账号信息
    openDetailPage(row) {
      var id = row.id;
      this.$router.push({ path: '/institution/institutionDetail', query: { id: id, operateType: 'binding' } });
    },


  },
};
</script>

<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.Top {
  position: relative;

  .operation {
    position: absolute;
    left: 15px;
    top: 68px;
  }
}

.dialog {
  /deep/.el-dialog {
    width: 500px !important;
  }


}
</style>